<template>
  <div class="container">
    <!-- 内容部分 -->
    <div class="operate">
      <slot></slot>
      <div style="margin-right: auto"></div>
      <slot name="op"></slot>
    </div>
    <div class="content" :style="{ maxHeight: item.h * 40 - 80 + 'px' }">
      <Chart :spec="spec" />
    </div>
  </div>
</template>

<script setup lang="ts">
  /**
   * @description 业务组件 -- 公告
   */
  import { defineProps } from "vue";
  import Chart from "./Chart.vue";
  defineProps(["item"]);
  const spec = {
    type: "radar",
    data: [
      {
        id: "radar",
        values: [
          { name: "Openlane", value1: 160.2, value2: 66.9 },
          { name: "Yearin", value1: 150.1, value2: 50.5 },
          { name: "Goodsilron", value1: 120.7, value2: 32.3 },
          { name: "Condax", value1: 89.4, value2: 74.5 },
          { name: "Opentech", value1: 78.5, value2: 29.7 },
          { name: "Golddex", value1: 77.6, value2: 102.2 },
          { name: "Isdom", value1: 69.8, value2: 22.6 },
          { name: "Plusstrip", value1: 63.6, value2: 45.3 },
          { name: "Kinnamplus", value1: 59.7, value2: 12.8 },
          { name: "Zumgoity", value1: 54.3, value2: 19.6 },
          { name: "Stanredtax", value1: 52.9, value2: 96.3 },
          { name: "Conecom", value1: 42.9, value2: 11.9 },
          { name: "Zencorporation", value1: 40.9, value2: 16.8 },
          { name: "Iselectrics", value1: 39.2, value2: 9.9 },
          { name: "Treequote", value1: 36.6, value2: 36.9 },
          { name: "Sumace", value1: 34.8, value2: 14.6 },
          { name: "Lexiqvolax", value1: 32.1, value2: 35.6 },
          { name: "Sunnamplex", value1: 31.8, value2: 5.9 },
          { name: "Faxquote", value1: 29.3, value2: 14.7 },
          { name: "Donware", value1: 23.0, value2: 2.8 },
          { name: "Warephase", value1: 21.5, value2: 12.1 },
          { name: "Donquadtech", value1: 19.7, value2: 10.8 },
          { name: "Nam-zim", value1: 15.5, value2: 4.1 },
          { name: "Y-corporation", value1: 14.2, value2: 11.3 },
        ],
        transforms: [
          {
            type: "fold",
            options: {
              key: "type",
              value: "value",
              fields: ["value1", "value2"],
            },
          },
        ],
      },
    ],
    categoryField: "name",
    valueField: "value",
    seriesField: "type",
    innerRadius: 0.3,
    outerRadius: 0.9,
    stack: true,
    area: {
      visible: true,
    },
    point: {
      visible: false,
    },
    axes: [
      {
        orient: "angle",
        domainLine: {
          style: {
            lineDash: [2, 2],
          },
        },
        grid: {
          style: {
            lineDash: [2, 2],
          },
        },
        tick: {
          visible: false,
        },
      },
      {
        orient: "radius",
        grid: {
          smooth: true,
          style: {
            lineDash: [2, 2],
          },
        },
        label: {
          visible: true,
          inside: true,
        },
      },
    ],
    crosshair: {
      categoryField: {
        visible: true,
        line: {
          style: {
            stroke: "#000",
            lineWidth: 1,
            opacity: 1,
            lineDash: [4, 4],
          },
        },
        label: {
          visible: true, // Default is false
        },
      },
      valueField: {
        visible: true,
        line: {
          smooth: true,
          style: {
            stroke: "#000",
            lineWidth: 1,
            opacity: 1,
            lineDash: [4, 4],
          },
        },
        label: {
          visible: true, // Default is false
        },
      },
    },
    legends: {
      visible: true,
    },
  };
</script>

<style scoped lang="scss">
  .container {
    user-select: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0px 10px 10px;
    font-size: 14px;
    color: #999;
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      overflow: hidden;
    }
  }

  .content-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .content-item-main {
    display: flex;
    flex-direction: column;
  }
  .operate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
